<template>
  <div class="book-detail">
    <t-card :bordered="false" class="content-card ">
    <div class="flex align-center justify-between pb16" >
      <t-space size="18px">
        <h2 class="card-title">仓库管理</h2>
        <t-select style="width: 140px;" v-model="params.w_type" :options="wOptions" clearable @change="getData" placeholder="按仓库类型">
          <template #label>
            <icon-font name="layers" style="color: #000;"/>
          </template>
        </t-select>
        <t-select style="width: 140px;" v-model="params.status" :options="statusOptions" clearable @change="getData" placeholder="按仓库状态">
          <template #label>
            <icon-font name="layers" style="color: #000;"/>
          </template>
        </t-select>
        <t-input style="width: 220px;" v-model="params.key" clearable @change="getData" placeholder="搜索：名称/联系人">
          <template #label>
            <icon-font name="search" size="16px" style="color:#000;font-weight: bold"/>
          </template>
        </t-input>
      </t-space>
      <t-space size="16px">
        <t-button @click="handleAdd" class="add-btn">
          <p class="flex align-center">
            <i class="iconfont icon-warehousing" style="font-size: 24px;margin-right: 4px"></i>
            添加仓库
          </p>
        </t-button>
      </t-space>
    </div>

    <t-row :gutter="[16, 16]">
      <t-col :xs="10" :sm="8" :md="6" :lg="4" v-for="item in lists" :key="item.id">
        <t-card :bordered="false" class="col-item">
          <div class="col-content">
            <div class="item-head">
              <h3>{{ item.name }}</h3>
              <t-switch v-model="item.status" :loading="item.loading" :label="['启用', '禁用']" :custom-value="[1, 0]" @change="changeStatus($event, item)"></t-switch>
            </div>
            <div class="mt16 flex align-center">
              <div class="data-item" @click="goWarehouseProduct(item)">
                <p class="item-num">{{ item.total_stock ? item.total_stock : 0}}</p>
                <p class="item-hint">库存数</p>
              </div>
              <div class="data-item" @click="handleOption(0, item)">
                <p class="item-num">{{ item.rk_count ? item.rk_count : 0 }}</p>
                <p class="item-hint">入库记录</p>
              </div>
              <div class="data-item" @click="handleOption(1, item)">
                <p class="item-num">{{ item.ck_count ? item.ck_count : 0 }}</p>
                <p class="item-hint">出库记录</p>
              </div>
              <div class="data-item" @click="handleOption(2, item)">
                <p class="item-num">{{ item.db_count ? item.db_count : 0 }}</p>
                <p class="item-hint">调拨记录</p>
              </div>
            </div>
            <div class="flex align-center justify-between mt16">
              <div class="item-footer">
                <t-button variant="outline" theme="primary" :disabled="item.status === 0" style="border-radius: var(--td-radius-medium)" @click="goWarehouseProduct(item)">查看</t-button>
              </div>
              <div>
                <t-dropdown :min-column-width="40" placement="bottom" trigger="click">
                  <template #dropdown>
                    <t-dropdown-menu>
                      <t-dropdown-item @click="handleEdit(item)">
                        <t-link theme="primary" hover="color">编辑</t-link>
                      </t-dropdown-item>
                      <t-dropdown-item @click="handleInfo(item)">
                        <t-link theme="primary" hover="color">详情</t-link>
                      </t-dropdown-item>
                      <t-dropdown-item @click="handleDelete(item)">
                        <t-link theme="danger" hover="color">删除</t-link>
                      </t-dropdown-item>
                    </t-dropdown-menu>
                  </template>
                  <icon-font name="more" size="18px"></icon-font>
                </t-dropdown>
              </div>
            </div>
          </div>
        </t-card>
      </t-col>
    </t-row>
    </t-card>

    <!-- 新增 -->
    <warehouse-add ref="add" @refresh="getData"></warehouse-add>
    <!-- 详情 -->
    <warehouse-info ref="info"></warehouse-info>
  </div>
</template>

<script lang="jsx">
import {IconFont, CalendarIcon, BrowseIcon} from "tdesign-icons-vue";
import IconUAV from "@/components/icon-UAV/index.vue";
import {warehouseDeleteApi, warehouseEditApi, warehouseListApi} from "@/api/warehouse";
import WarehouseAdd from "@/pages/warehouse/list/components/warehouse-add.vue";
import WarehouseInfo from "@/pages/warehouse/list/components/warehouse-info.vue";

export default {
  name: 'WarehouseList',
  components: {WarehouseAdd, WarehouseInfo, IconUAV, IconFont, BrowseIcon},
  data() {
    return {
      renderPrefixIcon: () => <CalendarIcon/>,
      params: {
        page: 1,  // 当前页
        limit: 10,  // 每页条数
        w_type: '', // 仓库类型（0平台库；1代理商库；）
        key: '',  // 关键字
        status: '', // 状态
      },
      tabList: [
        {label: '全部', num: 564, value: 'all'},
        {label: '上架', num: 564, value: 'selling'},
        {label: '下架', num: 564, value: 'warehouse'},
        {label: '回收', num: 564, value: 'recycle'},
      ],  //
      lists: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'name', title: '仓库名称', width: 160},
        {colKey: 'linkman', title: '联系人', width: 100},
        {colKey: 'phone', title: '电话', width: 220},
        {colKey: 'w_type', title: '仓库类型', width: 120},
        {colKey: 'order_count', title: '关联订单', width: 220},
        {colKey: 'status', title: '状态', width: 140},
        {colKey: 'remark', title: '备注', ellipsis: true},
        {colKey: 'option', title: 'title-slot-option', fixed: 'right', width: 100},
      ],
      selectedRowKeys: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 20,
        total: 0,
      },
      maxHeight: 472,
      loading: false,

      statusOptions: [
        {label: '启用', value: 1},
        {label: '禁用', value: 0},
      ],
      wOptions: [
        { label: '平台库', value: 0 },
        { label: '代理商库', value: 1 },
      ],

    };
  },
  mounted() {
    let height = document.documentElement.clientHeight - 244;
    this.maxHeight = height
    window.onresize = () => {
      // 获取屏幕高度 - 顶部高度
      height = document.documentElement.clientHeight - 244;
      this.maxHeight = height
    };
    this.getData()
  },
  methods: {
    goWarehouseProduct(item) {
      if (item.status) {
        this.$router.push({
          name: 'WarehouseProduct',
          query: {
            warehouseId: item.id
          }
        })
      }
    },
    // 切换状态
    changeStatus(value, item) {
      item.loading = true
      warehouseEditApi({id: item.id, status: value}).then(res=> {
        this.$message.success('切换成功')
      }).catch(err => {
      }).finally(()=> {
        item.loading = false
        this.$forceUpdate()
      })
    },
    // 点击操作项
    handleOption(orderType, item) {
      if (item.status) {
        this.$router.push({
          name: 'WarehouseOrderList',
          query: {
            orderType,
            warehouseId: item.id
          }
        })
      }
    },
    // 添加
    handleAdd() {
      this.$refs.add.open('add')
    },
    // 编辑
    handleEdit(row) {
      this.$refs.add.open('edit', row)
    },
    // 复制
    handleCopy(row) {
      this.$refs.add.open('copy', row)
    },
    // 详情
    handleInfo(row) {
      this.$refs.info.open(row.id)
    },
    // 删除
    handleDelete(row) {
      const confirmDia = this.$dialog.confirm({
        header: '确认删除？',
        body: '删除后数据将不可恢复！是否确认删除？',
        theme: 'warning',
        confirmBtn: '确定',
        cancelBtn: '取消',
        onConfirm: ({ e }) => {
          warehouseDeleteApi({id: row.id}).then(res => {
            this.$message.success(res.retmsg)
            this.getList()
            // 请求成功后，销毁弹框
            confirmDia.destroy();
          }).catch(err => {
            if (err.retcode === 4003) {
              confirmDia.hide();
            }
            console.log('err', err)
          })
        },
        onClose: ({ e, trigger }) => {
          confirmDia.hide();
        },
      });

    },
    // 获取数据
    getData() {
      this.pagination.defaultCurrent = 1
      this.getList()
    },
    // 获取列表
    getList() {
      this.loading = true
      this.params.page = this.pagination.defaultCurrent
      warehouseListApi(this.params).then(res => {
        this.pagination.total = res.count
        this.lists = res.data
      }).catch(err => {
      }).finally(() => {
        this.loading = false
      })
    },
    // 切换分页
    pageChange(pageInfo) {
      const {current, defaultCurrent, defaultPageSize,} = pageInfo
      this.pagination.defaultCurrent = current
      this.getList()
    },
    handleSelectChange(value, {selectedRowData}) {
      this.selectedRowKeys = value;
    },
  },
}
</script>

<style lang="less" scoped>
.book-detail {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--td-radius-medium);
  background-color: #FFFFFF;

  .add-btn {
    border-radius: var(--td-radius-medium);
  }

  /deep/ .col-item {
    box-shadow: 0px 0px 22px rgba(0,0,0,0.05);

    .t-card__body {
      padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
    }

    .t-card__footer {
      //border-top: 1px solid #e5e5e5;
    }

    .item-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: var(--td-comp-paddingTB-m);

      h3 {
        font-size: 18px;
        font-weight: 400;
        line-height: 24px;
        color: #000000;
        margin-right: var(--td-comp-margin-m);
      }
    }

    .item-center {
      //padding-top: var(--td-comp-paddingTB-m);

      p {
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        text-align: left;
        color: rgba(0,0,0,0.4);
      }
    }

    .data-item {
      margin-right: 24px;
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;

      &:hover {
        background-color: rgba(0,0,0,0.05);
      }

      .item-num {
        font-size: 17px;
        font-weight: 700;
        line-height: 19.79px;
        color: var(--td-brand-color);
      }


    }

    .item-hint {
      font-size: 14px;
      font-weight: 400;
      line-height: 19.6px;
      text-align: left;
      color: rgba(0,0,0,0.4);
    }

    .item-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      //padding-top: var(--td-comp-paddingTB-l);
    }
  }
}

/deep/ .content-card {

  .t-card__header {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
    padding-bottom: 0;
  }

  .t-card__body {
    padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl) var(--td-comp-paddingTB-m);
  }

}

.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F9F9F9;
  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-xl);
  padding-right: var(--td-comp-paddingLR-xxl);
}
</style>
